<template>
  <div class="demo">
    <van-nav-bar
      title="扫一扫"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      style="background-color: #081c33;"
    />
    <div class="content">
      <qr-stream
        @decode="onDecode"
        class="container"
       :delay="0"  autofocus  autoplay @init="onInit"  :video-constraints="{ width: 12800000, height: 7200000 }"  :auto-gain="true"
      >
        <div class="qr-scanner">
          <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
          </div>
          <div class="txt">
            将二维码/条码放入框内，即自动扫描
            <div class="myQrcode">我的二维码</div>
          </div>
        </div>
      </qr-stream>
    </div>
  </div>
</template>
<script lang="ts">
import { userStore } from "../../stores/user.ts";
import { defineComponent, ref, Ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { QrStream } from "vue3-qr-reader";
import { ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  name: "Qrcode",
  components: {
    QrStream,
  },
  setup() {
    const  qrReader=ref("")
    const Interface_Code = sessionStorage.getItem("item");
    const User_Code = JSON.parse(sessionStorage.getItem("UserInfo")).sUser_Code;
    const user = userStore();
    const router = useRouter();
    const onClickLeft = () => router.replace("/souye");
    const onDecode = (data) => {
      var url = data;
      console.log(url);
      var keyValue = data.split("&");
      console.log(keyValue);
      var obj = {};
      for (var i = 0; i < keyValue.length; i++) {
        //循环分割挂过后的地址
        var item = keyValue[i].split("=");
        var key = item[0];
        var value = item[1];
        obj[key] = value;
      }
      console.log(obj);
      sessionStorage;
      user.xqlist = obj;
      sessionStorage.setItem("xq", JSON.stringify(obj));
      axios
        .post(
          window.globalUrl.server + "Service.asmx/Get_CheckSub_Data",
          JSON.stringify({
            User_Code: User_Code,
            Interface_Code: Interface_Code,
            Check_No: obj.Check_No,
          })
        )
        .then((res) => {
          if (res.data.RltCode == 1) {
            user.Get_CheckSub_Data1 = JSON.parse(res.data.RltData);
            sessionStorage.setItem(
              "data1",
              JSON.stringify(JSON.parse(res.data.RltData))
            );
            router.replace("/souye");
          } else {
             if (res.data.RltCode == 0) {
              ElMessage.error(res.data.RltMsg);
            }
            router.replace("/souye");
          }
        })
        .catch((eorro) => {
          // ElMessage.error("网络不稳定,请联系工作人员");
          router.replace("/souye");
        });
    };
    const onInit = (promise) => {
    promise.then(({ video, canvas, context }) => {
    qrReader.value = { video, canvas, context };
    qrReader.value.video.play();
    qrReader.value.start();
    qrReader.value.focus()
        })
      .catch((error) => {
          console.error(error);
        });
    };
    return {
      onDecode,
      onClickLeft,
      onInit,
    };
  },
});
</script>
<style scoped>
.demo {
  width: 100%;
  height: 100%;
}
::v-deep .van-nav-bar {
  width: 100vw;
}
::v-deep.container {
  position: relative;
}
.content {
  width: 100%;
  height: 100%;
  position: fixed;
}
.error {
  font-weight: bold;
  color: red;
}
.cameraMessage {
  width: 100%;
  height: 60px;
}
.qr-scanner {
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    );
  position: st;
  background-color: #1110;
}
.qr-scanner .box {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
}
.qr-scanner .txt {
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 70%;
  left: 0;
}
.qr-scanner .myQrcode {
  text-align: center;
  color: #00ae10;
}
.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite alternate;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
